.energy-chart-container {
    background: #ffffff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    font-family: "Segoe UI", Arial, sans-serif;
    width: 100%;
    max-width: 700px;

    .energy-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      .title {
        font-size: 16px;
        font-weight: bold;
        margin: 0;
      }

      .controls {
        display: flex;
        align-items: center;
        gap: 12px;

        select {
          padding: 6px 10px;
          border: 1px solid #ccc;
          border-radius: 4px;
          font-size: 14px;
          transition: border-color 0.2s ease;

          &:focus {
            border-color: #409eff;
            outline: none;
          }
        }

        .date-range-group {
          display: flex;
          align-items: center;
          gap: 6px;

          input[type="date"] {
            padding: 6px 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
            transition: border-color 0.2s ease;

            &:focus {
              border-color: #409eff;
              outline: none;
            }
          }

          .range-separator {
            font-size: 14px;
            color: #666;
            user-select: none;
          }
        }
      }
    }

    .chart {
      width: 100%;
      height: 200px;
    }
  }
